import Block from 'src/components/Block'
import useFetch from './useFetch3'
import s from './index.module.scss'
import r from 'src/reset.module.scss'
import List from '../List'
import {searchApi} from './api'

const td = {
  title: '搜索案例五：防抖',
  desc: '自定义hook，由于输入过程中，input 的 onchange 事件会高频率触发，如果每一次改变都要去响应对应的逻辑有可能会造成性能问题，因此，我们采用防抖的策略，在输入结束之后自动开始搜索'
}

export default function DemoOneNormal() {
  const {
    loading, 
    setParam,
    list = [],
    error
  } = useFetch(searchApi)

  return (
    <Block className={s.container} title={td.title} desc={td.desc}>
      <div className={r.flex}>
        <input
          className={s.input}
          placeholder="请输入您要搜索的内容"
          onChange={(e) => setParam(e.target.value)}
        />
      </div>
      <List
        list={list}
        loading={loading}
        error={error}
        renderItem={(item) => (
          <div key={item} className={s.item}>{item}</div>
        )}
      />
    </Block>
  )
}
